<template>
      <div class="User">
        <div style="margin: 10px 10px">
            <el-input style="width: 200px" placeholder="请输入用户名" suffix-icon="el-icon-search" v-model="username"></el-input>
            <el-button class="ml-5" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
            <el-button type="warning" @click="reset"><i class="el-icon-refresh-left"></i>重置</el-button>
        </div> 
 <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
@selection-change="handleSelectChange">
<el-table-column type="selection" width="55"></el-table-column>
 <el-table-column prop="username" label="用户名" width="130" align="center"></el-table-column>
 <el-table-column prop="role" label="用户角色" width="130" align="center"></el-table-column>
 <el-table-column prop="nickname" label="昵称" width="130" align="center"></el-table-column>
 <el-table-column prop="email" label="邮箱" width="180" align="center"></el-table-column>
 <el-table-column prop="phone" label="电话" width="170" align="center"></el-table-column>
 <el-table-column prop="registerTime" label="注册时间" width="160" align="center"></el-table-column>
 <el-table-column prop="department" label="部门" width="130" align="center"></el-table-column>
 <el-table-column prop="position" label="职位" width="120" align="center"></el-table-column>
 <el-table-column prop="grantstatus" label="授权状态" width="120" align="center"></el-table-column>
 <el-table-column label="操作" width="190" align="center">
    <template slot-scope="scope">
        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info"
            icon-color="red" title="您确定授权吗？" @confirm="grant(scope.row.id)">
            <el-button size="small" class="grantbutton" type="warning" slot="reference">
                授权
                <i class="el-icon-s-check"></i>
            </el-button>
        </el-popconfirm>
        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info"
            icon-color="red" title="您确定取消授权吗？" @confirm="cancelgrant(scope.row.id)">
            <el-button size="small" class="cancelgrantbutton" type="danger" slot="reference">
                取消授权
                <i class="el-icon-circle-close"></i>
            </el-button>
        </el-popconfirm>
    </template>
</el-table-column>
 </el-table>
 <div style="padding: 10px 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNum"
                :page-sizes="[10, 15, 20, 25]" :page-size="pageSize" background
                layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
  </div>
</template>

<script>
import { formToJSON } from 'axios'

import request from '@/utils/request'

export default {
    name: "UserManage",
    data() {
        return {
            user:'',
            form:{},
            tableData: [],
            multipeSelection: [],
            username:'',
            total: 0,
            pageNum: 1,
           pageSize: 10,
           }
        },
    created() {
        // 每次页面渲染时请求分页查询
        this.load()
    },
    methods: {
        load() {
            this.request.get("/user/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    username: this.username
                }
            }).then(res => {  //向后端发送GET请求，请求分页查询之后，后端的Service接口会调用Mybatis-plus的IService接口中封装好的Page函数（专门用来分页查询的函数）
                //然后这个Page函数会根据条件构造器queryWrapper构造的条件进行分页查询，返回一个分页对象，包含了Users和total
                //它俩一起作为后端返回给前端的result对象的data部分，要注意这里res.data才是后端返回的Result对象
                this.tableData = res.data.data.records,//所有分页查询函数都要接收后端返回的Users属性和total属性
                console.log(res.data.data.records)
                //在后端代码中，​UserService.page(new Page<>(pageNum, pageSize), queryWrapper)​方法返回的结果是一个分页对象，
                //包含了当前页的记录列表以及总记录数等信息。当前端发送请求并获取到后端返回的数据后，
                //前端需要从返回的数据中提取出分页对象中的记录列表和总记录数来展示在页面上，
                this.total = res.data.data.total  //Users属性是当前页数据记录列表，total是总记录数
            })
        },
        handleSelectChange(val) {
            this.multipeSelection = val
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.load()
        },
        reset() {
            this.username ='',
            this.load()
        },
        grant(id){//授权本质是把用户的授权状态修改为已经授权，即本质是一个修改保存操作
    // 如果要按照修改保存操作来授权，那么先按照当前id获取当前用户的所有数据，然后修改授权状态，再把修改后的数据作为POST请求体发送到后端保存
         this.user=sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {};
         this.request.get("/user/"+id).then(res => {
            if(res.data.data.username==this.user.username){
                this.$message.error("不能对本人操作！")
            }
            else{
            this.form = res.data.data
            this.form.grantstatus='已授权'
            this.request.post("/user", this.form).then(res2 => {
               if(res2.data.data){
                // sessionStorage.setItem("user", JSON.stringify(res.data)) 
               this.$message.success("授权成功")
               this.load()
               }else{
               this.$message.error("授权失败")
               }
           })
        }
        })
        },
        cancelgrant(id){
            this.user=sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {};
            this.request.get("/user/"+id).then(res => {
                if(res.data.data.username==this.user.username){
                this.$message.error("不能对本人操作！")
            }
            else{
            this.form = res.data.data
            this.form.grantstatus='未授权'
            this.request.post("/user", this.form).then(res2 => {
               if(res2.data.data){
                // sessionStorage.setItem("user", JSON.stringify(res.data)) 
               this.$message.success("撤销授权成功")
               this.load()
               }else{
               this.$message.error("撤销授权失败")
               }
           })
        }
        })
        }
    }
    }
</script>  


<style>
.headerBg {
    background: #eee !important;
}
.User{
    position: relative;
    top: 10px;
}
.grantbutton{
    position:absolute;
    left:5px;
   
}
.cancelgrantbutton{
    position:absolute;
    left:90px;
    
}
</style>